import React, {Component} from 'react'
import {Block} from 'fs-flex';
import {Button, List, Radio, Toast, WingBlank} from 'antd-mobile';
import {routerRedux} from 'dva/router';
import {createForm} from 'rc-form';
import {connect} from 'dva'
import Header from '../../components/Header/index';
import PaihaoService from '../../services/paihaoService';
import Canstant from '../../utils/constant'
import qs from 'qs'
import style from './index.less'

const RadioItem = Radio.RadioItem;

// 排号
class PaiHao extends Component {
  state = {
    businesstypes: [],
    verificationCodeVal: null,//验证码
    businessType: null,//业务类型——选中值
  }

  async componentDidMount() {
    const {location} = this.props
    const {code, data} = await PaihaoService.queryBusinessType()
    if (code === Canstant.responseOK) {
      this.setState({
        businesstypes: data
      })
    }

  }

  onChange = (value) => {
    this.setState({
      businessType: value,
      value: value,
    });
  };

  gotoPH = () => {
    const {dispatch} = this.props
    let url = '/ph/phDate';
    if (!this.state.businessType) {
      Toast.fail('请选择业务类型', 1)
      return
    }
    url += `?businessType=${this.state.businessType}`
    dispatch(routerRedux.push(url))
  }

  render() {
    const {history} = this.props
    const {businesstypes,value} = this.state
    return (
      <Block vf>
        <Block>
          <Header  history={history} title='排号'/>
          <Block vf>
            <WingBlank>
              <Block vf mt={10}>
                <Block m={20} fs={18} f={1} a='c' j='c'>业务类型（必选）</Block>
                <Block mt={5}>
                  <List className={style.busiItemStyle}>
                    {businesstypes.map(item => (
                      <RadioItem key={item.id} checked={value === item.id} onChange={() => this.onChange(item.id)}>
                        {item.busitype}
                      </RadioItem>
                    ))}
                  </List>
                </Block>
              </Block>
              <Block wf mt={15} style={{paddingBottom: '15px'}}>
                <Block f='3'></Block>
                <Block f='4'><Button a='c' f='c' size='small' type="primary"
                                     onClick={this.gotoPH.bind(this)}>预约排号</Button></Block>
                <Block f='3'></Block>
              </Block>
            </WingBlank>
          </Block>
        </Block>
      </Block>
    )
  }
}

export default connect()(createForm()(PaiHao))
